// 引入样式
import './index.css';
// 引入路由方法
import { useNavigate } from 'react-router-dom';
// 引入 阿里矢量图标
import { createFromIconfontCN } from '@ant-design/icons';
// 引入组件
import { Card,Avatar } from 'antd-mobile';
import {FC} from 'react';
let IconFont = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/c/font_4148694_bdolvd6ba64.js'});
interface UserProps{};

const User:FC<UserProps>=()=>{
  // 返回上一个页面
  const navigate=useNavigate();
  const back=()=>{
    navigate(-1);
  }
  // 进入庄户管理页面
  const goSetting=()=>{
    navigate('/setting');
  }
  // 照片路径
  const demoAvatarImages = [
    'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
    'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
  ]
    return(
        <>
          <div className='User'>
            {/* 头部标签 */}
            <div className="UserHeader">
              <span onClick={back}><IconFont type='icon-31fanhui1'/></span>
              <h5>我的</h5>
              <span><IconFont type='icon-gengduo'/></span>
            </div>
          
            {/* 卡片 */}
            <div className="UserContent">
            <Card className='Card'>
              <Avatar className='CardPhoto' src={demoAvatarImages[0]} />
              <p>昵称：小须美鱥</p>
              <p>登录名：admin</p>
              <p>个性签名：随心所欲，蜂富多彩</p>
            </Card>
            <div className="UserList">
              <li onClick={goSetting}>
                <p>账号管理</p>
                <span><IconFont type='icon-jiantou'/></span>
              </li>
            </div>
            </div>
            
          </div>
        </>
    )
}

export default User;